<template>
    <div class="mi-header">
        <div class="mi-head">
            <div class="mi-head-main">
                <div class="mi-head1">
                    <a href="https://www.mi.com/index.html" class="sep">小米商城</a>
                    <a href="https://www.miui.com/" target="_blank" class="al sep">MIUI</a>
                    <a href="https://iot.mi.com/" target="_blank" class="al sep">loT</a>
                    <a href="https://i.mi.com/" target="_blank" class="al sep">云服务</a>
                    <a href="https://airstar.com/home" target="_blank" class="al sep">天星科技</a>
                    <a href="https://youpin.mi.com/" target="_blank" class="al sep">有品</a>
                    <a href="https://xiaoai.mi.com/" target="_blank" class="al sep">小爱开放平台</a>
                    <a href="https://qiye.mi.com/" target="_blank" class="al sep">企业团购</a>
                    <a href="https://www.mi.com/aptitude/list/?id=88" target="_blank" class="al sep">资质证照</a>
                    <a href="https://www.mi.com/aptitude/list/" target="_blank" class="al sep">协议规则</a>
                    <a href="https://www.mi.com/appdownload/" target="_blank" class="al sep">
                        下载app
                        <span class="appcode">
                            <img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" width="90" height="90">
                            小米商城APP
                        </span>
                    </a>
                    <a href="https://xiaomishare.mi.com/?from=micom" target="_blank" class="al sep">智能生活</a>
                    <a href="javascript:;" class="al">Select Location</a>
                </div>
                <div class="mi-head3">
                    <a href="">
                        购物车(0)
                    </a>
                </div>
                <div class="mi-head2">
                    <a href="" class="sep">登录</a>
                    <a href="" class="al sep">注册</a>
                    <a href="" class="al">消息通知</a>
                </div>
            </div>
        </div>
        <SiteHead></SiteHead>
    </div>
</template>

<script>
import SiteHead from './SiteHead';

export default {
    name: 'MiHeader',
    components: {SiteHead},
}
</script>

<style lang="less" scoped>
.mi-header {
    width: 100%;
    height: 140px;

    .mi-head {
        width: 100%;
        height: 40px;
        background-color: rgb(51,51,51);

        .mi-head-main {
            width: 1226px;
            height: 100%;
            margin: auto;
            color: #b0b0b0;
            font-size: 12px;

            a {
                position: relative;
                color: #b0b0b0;
                text-decoration: none;
                display: inline-block;
                font-size: 12px;

                .appcode {
                    position: absolute;
                    top: 40px;
                    left: 50%;
                    width: 124px;
                    height: 0;
                    background: #fff;
                    margin-left: -55px;
                    -webkit-box-shadow: #aaa 0 1px 5px;
                    box-shadow: 0 1px 5px #aaa;
                    text-align: center;
                    font-size: 16px;
                    color: #333;
                    line-height: 1;
                    overflow: hidden;
                    -webkit-transition: height .3s;
                    transition: height .3s;
                    z-index: 3;

                    img {
                        display: block;
                        margin: 18px auto 12px;
                        border: 0;
                    }
                }

                &:hover {
                    color: #fff;

                    .appcode {
                        height: 148px;
                    }
                }

                &.al {
                    margin-left: 12px;
                }

                &.sep {
                    &::after {
                        content: "";
                        position: absolute;
                        z-index: 1;
                        top: 50%;
                        transform: translateY(-50%);
                        right: -6px;
                        display: inline-block;
                        width: 1px;
                        height: 1em;
                        background-color: #424242;
                    }
                }
            }

            .mi-head1 {
                float: left;
                height: 100%;
                line-height: 40px;
            }

            .mi-head2 {
                float: right;
                height: 100%;
                line-height: 40px;
            }

            .mi-head3 {
                float: right;
                position: relative;
                width: 120px;
                height: 100%;
                margin-left: 15px;
                transition: all .2s;

                a {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    line-height: 40px;
                    background-color: #424242;
                }
            }
        }
    }
}
</style>